<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<meta name="description" content="Xenon Boostrap Admin Panel" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>首页</title>
<style type="text/css">
h3 {
	text-align: center;
	color: white;
	font-size: 2.6rem;
	margin-top: 5rem;
}
</style>
</head>
<body>
	<h3 id="_show_time">00:00:00</h3>
	<script type="text/javascript">
	function fullstr(str){
		str += '';
		return str.length==1?'0'+str:str;
	}
	function showTime(){
		var now = new Date();
		var elem = window.document.getElementById("_show_time");
		elem.innerHTML = fullstr(now.getHours())+":"+fullstr(now.getMinutes())+":"+fullstr(now.getSeconds());
	}
	showTime();
	setInterval(showTime, 1000);
	
	window.onload = function() {
		var d = window.document.getElementById("_d");
		if (!d) {
			d = window.document.createElement("canvas");
			d.id = "_d";
			d.style = "top: 0; left: 0; position: fixed; z-index: -999;";
			window.document.getElementsByTagName("BODY")[0]
					.appendChild(d);
		}
 		var Body = document.getElementsByTagName("body")[0];//原来是d，这里扩大范围.
		C = Math.cos; // cache Math objects
		S = Math.sin;
		U = 0;
		w = window;
		j = document;
		c = d.getContext("2d");
		var W, H;
		w.onresize=function(){
			W = d.width = w.innerWidth;
			H = d.height = w.innerHeight;
		}
		w.onresize();
		c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
		c.globalCompositeOperation = "lighter"; // switch to additive color application
		c.lineWidth = 0.2;
		c.lineCap = "round";
		var bool = 0, t = 0; // theta
		Body.onmousemove = function(e) {
			if (window.T) {
				if (D == 9) {
					D = Math.random() * 15;
					f(1);
				}
				clearTimeout(T);
			}
			X = e.pageX; // grab mouse pixel coords
			Y = e.pageY;
			a = 0; // previous coord.x
			b = 0; // previous coord.y 
			A = X, // original coord.x
			B = Y; // original coord.y
			R = (e.pageX / W * 999 >> 0) / 999;
			r = (e.pageY / H * 999 >> 0) / 999;
			U = e.pageX / H * 360 >> 0;
			D = 9;
			g = 360 * Math.PI / 180;
			T = setInterval(f = function(e) { // start looping spectrum
				c.save();
				c.globalCompositeOperation = "source-over"; // switch to additive color application
				if (e != 1) {
					c.fillStyle = "rgba(0,0,0,0.02)";
					c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
				}
				c.restore();
				i = 25;
				while (i--) {
					c.beginPath();
					if (D > 450 || bool) { // decrease diameter
						if (!bool) { // has hit maximum
							bool = 1;
						}
						if (D < 0.1) { // has hit minimum
							bool = 0;
						}
						t -= g; // decrease theta
						D -= 0.1; // decrease size
					}
					if (!bool) {
						t += g; // increase theta
						D += 0.1; // increase size
					}
					q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
					x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25))
							+ (r - R); // center on xy coords
					y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
					if (a) { // draw once two points are set
						c.moveTo(a, b);
						c.lineTo(x, y)
					}
					c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid
					c.stroke();
					a = x; // set previous coord.x
					b = y; // set previous coord.y
				}
				U -= 0.5; // increment hue
				A = X; // set original coord.x
				B = Y; // set original coord.y
			}, 18);
		}
		j.onkeydown = function(e) {
			a = b = 0;
			R += 0.05
			return true;
		}
		Body.onmousemove({
			pageX : 300,
			pageY : 290
		})
	}
</script>
</body>
</html>